<script setup>
import {ref, onMounted} from 'vue'
import {useStore} from '@/store/index.js'
import all from './module/all.vue'
import collection from './module/collection.vue'
import concern from './module/concern.vue'
import opus from './module/opus.vue'
import thumbs from './module/thumbs.vue'

const store = useStore()
const token = store.getToken;
if (!token) {
  uni.redirectTo({
    url: '/pages/login/login'
  })
}
const popup = ref(null)
const currentTabIndex = ref(0)
const modules = ref(['全部', '作品', '点赞', '关注', '收藏']);
const navigations = ref(['个人成长管理', '我的草稿', '浏览记录', '马上倾诉', '社区公约', '编辑资料', '退出登录',])
const click = name => {
  popup.value.close()
  if (name === '退出登录') {
    store.setToken('')
    uni.redirectTo({
      url: '/pages/login/login'
    })
  }
  if (name === '马上倾诉') {
    uni.navigateTo({
      url: '/pages/mine/module/chat'
    })
  }
}
</script>

<template>
  <div v-if='token' class="mine">
    <div class="background">
      <div class="more" @click="popup.open('right')">
        <cover-image src="../../static/more.png"></cover-image>
      </div>
      <div class="user">
        <image class="avatar"
               src="https://tse2-mm.cn.bing.net/th/id/OIP-C.3P8qIgIHeaQGWolYn34_ZgAAAA?w=188&h=188&c=7&r=0&o=5&pid=1.7"></image>
        <div class="name">Router</div>
      </div>
    </div>
    <div class="content">
      <div class="social-stats">
        <span class="link"><span style="font-weight: bold;">0</span>获赞</span>
        <span class="link"><span style="font-weight: bold;">0</span>关注</span>
        <span class="link"><span style="font-weight: bold;">0</span>朋友</span>
        <span class="link"><span style="font-weight: bold;">0</span>粉丝</span>
      </div>
      <div style="font-size: 12px; color: #777; margin-top: 25px; margin-bottom: 10px;">点击添加介绍，让大家认识你...
      </div>
      <div class="modules">
        <div
            v-for="(module, index) in modules"
            :key="index"
            :class="[
						'module',
						'f-color',
						'link',
						{'f-active-color': currentTabIndex===index}
					]"
            @click="currentTabIndex = index"
        >
          {{ module }}
        </div>
      </div>
      <div class="container">
        <template v-if="currentTabIndex===0">
          <all></all>
        </template>
        <template v-else-if="currentTabIndex===1">
          <opus></opus>
        </template>
        <template v-else-if="currentTabIndex===2">

          <thumbs></thumbs>
        </template>
        <template v-else-if="currentTabIndex===3">

          <concern></concern>
        </template>
        <template v-else-if="currentTabIndex===4">
          <collection></collection>
        </template>
      </div>
    </div>
  </div>
  <uni-popup ref="popup" background-color="#fff" border-radius="10px 0 10px 0" type="right">
    <view class="popup-content content">
      <div v-for="(navigation, i) in navigations" :key="i" class="navigation" @click="click(navigation)">
        {{ navigation }}
      </div>
    </view>
  </uni-popup>
</template>

<style scoped>
.mine {
  width: 100vw;
  height: 100%;
}

.mine > .background {
  width: 100%;
  height: 200px;
  position: relative;
  padding-bottom: 25px;
  background-image: url('https://s1.aigei.com/prevfiles/fe6b492f21a2491fa7ba79a34162d92c.png?e=1735488000&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:Sj_b6NZauxs1o7CstF3lB6HySa8=');
}

.mine > .background > .more {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 10px;
  right: 10px;
  /* outline: 1px solid red; */
}

.mine > .background > .user {
  width: 100%;
  height: 100px;
  position: absolute;
  bottom: 25px;
  display: flex;
  align-items: center;
}

.mine > .background > .user > .avatar {
  width: 100px;
  height: 100px;
  margin-right: 15px;
  margin-left: 15px;
  border-radius: 50%;
  border: 2px solid white;
}

.mine > .background > .user > .name {
  font-size: 20px;
  font-weight: bold;
}

.mine > .content {
  width: 100%;
  height: 550px;
  background: white;
  transform: translateY(-10px);
  padding-top: 20px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.mine > .content > .social-stats {
  width: 65%;
  display: flex;
  justify-content: space-between;
}

.mine > .content > .modules {
  display: flex;
  justify-content: space-between;
}

.mine > .content > .container {
  margin-top: 10px;
}

.popup-content {
  width: 170px;
  height: calc(100% - 50px);
  background-color: #d1d1d1;
}

.popup-content > .navigation {
  margin-bottom: 20px;
  font-family: '幼圆';

}
</style>